<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>12306 订单</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/order.css">
    <script src="scripts/order.js"></script>
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header class="fixed-header">
            <p>订单</p>
        </header>

        <!-- 火车票订单和提示部分 -->
        <div class="train-order-tips">
            <p class="train-order">火车票订单</p>
            <a href="">温馨提示</a>
        </div>

        <!-- 订单状态部分 -->
        <ul class="order-status">
            <li>
                <img src="images/待支付.jpg" alt="待支付">
                <p>待支付</p>
            </li>
            <li>
                <img src="images/已支付.jpg" alt="已支付">
                <p>已支付</p>
            </li>
            <li>
                <img src="images/候补订单.jpg" alt="候补订单">
                <p>候补订单</p>
            </li>
            <li>
                <img src="images/本人车票.jpg" alt="本人车票">
                <p>本人车票</p>
            </li>
        </ul>

        <!-- 其他订单部分 -->
        <ul class="other-order">
            <li>
                <img src="images/餐饮·特产订单.png" alt="餐饮·特产订单">
                <p>餐饮·特产订单</p>
            </li>
            <li>
                <img src="images/保险订单.png" alt="保险订单">
                <p>保险订单</p>
            </li>
            <li>
                <img src="images/酒店订单.png" alt="酒店订单">
                <p>酒店订单</p>
            </li>
            <li>
                <img src="images/空铁联运订单.png" alt="空铁联运订单">
                <p>空铁联运订单</p>
            </li>
            <li>
                <img src="images/计次·定期票订单.png" alt="计次·定期票订单">
                <p>计次·定期票订单</p>
            </li>
            <li>
                <img src="images/约车订单.png" alt="约车订单">
                <p>约车订单</p>
            </li>
            <li>
                <img src="images/商务座服务订单.png" alt="商务座服务订单">
                <p>商务座服务订单</p>
            </li>
            <li>
                <img src="images/铁路商城订单.png" alt="铁路商城订单">
                <p>铁路商城订单</p>
            </li>
            <li>
                <img src="images/汽车票订单.png" alt="汽车票订单">
                <p>汽车票订单</p>
            </li>
            <li>
                <img src="images/旅游订单.png" alt="旅游订单">
                <p>旅游订单</p>
            </li>
            <li>
                <img src="images/铁水联运订单.png" alt="铁水联运订单">
                <p>铁水联运订单</p>
            </li>
        </ul>

        <!-- 收起部分 -->
        <div class="hide">
            <a href="#" id="toggle-more">查看更多 <i class="fa fa-angle-down"></i></a>
            <a href="#" id="toggle-less" style="display: none;">收起 <i class="fa fa-angle-up"></i></a>
        </div>
        <!-- 广告部分 -->
        <div class="ad">
            <img src="images/advertisement.png" alt="广告">
        </div>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="index" onclick="location.href='index.html'">
                <i class="fa fa-train"></i>
                <p>首页</p>
            </li>
            <li onclick="location.href='travel-service.html'">
                <i class="fa fa-suitcase"></i>
                <p>出行服务</p>
            </li>
            <li class="order" onclick="location.href='order.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li onclick="location.href='member.html'">
                <i class="fa fa-diamond"></i>
                <p>铁路会员</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>
</html>